<html>
<head>
<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript" src="blog.js"></script>
<script>
  var db;

  function load() {
    init();
    createStore();
    setupDatabase();
    if (localDatabase) {
      listEntries();
    }
  }


  function listEntries(root) {
    try {
      rs = localDatabase.execute("SELECT * FROM Entries");
    } catch(e) {
      //getEvents();
      return;
    }
    
    var entries = [];
    var num = 0;

    while (rs.isValidRow()) {
      isPopulated = true;
      var entry = {};
      entry.author = rs.fieldByName('author');
      entry.text = rs.fieldByName('text');
      entries[num] = entry;
      num++;
      rs.next();
    }
    rs.close();

    if (num == 0) {
      return;
    } else {
      var html = [];
      for (var i = 0; i < entries.length; i++) {
        html.push('<h4>', entries[i].author, '</h4>');
        html.push('<p>', entries[i].text, '</p>');
      }
      document.getElementById("blog").innerHTML = html.join("");
    }
  }

  function insertEntry() {
    var author = document.getElementById('author');
    var entry = document.getElementById('entry');
   
    if (localDatabase) {
      localDatabase.execute("INSERT INTO Entries VALUES (?,?)", [author.value, entry.value]);
    }
  }
  
</script>
</head>
<body onload="load()">

<h1>My Blog</h1>

<div id="blog"></div>

<h3>New Entry</h3>

<form>
  Author: <input id="author" type="text"/><br/>
  Entry: <textarea id="entry"></textarea>
  <input type="submit" onclick="insertEntry()"/>
</form>

<span id="textOut" style="color: red;"></span>
</body>
</html>
